<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CCPlugins - Claude Code CLI 命令扩展工具</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
        }
        .serif-font {
            font-family: 'Noto Serif SC', serif;
        }
        .gradient-text {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-4px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        }
        .feature-icon {
            transition: all 0.3s ease;
        }
        .feature-icon:hover {
            transform: scale(1.1) rotate(5deg);
        }
        .code-block {
            background: #1a1a2e;
            color: #eee;
            border-radius: 8px;
            padding: 1.5rem;
            overflow-x: auto;
        }
        .drop-cap {
            float: left;
            font-size: 4rem;
            line-height: 1;
            font-weight: 700;
            margin-right: 0.5rem;
            margin-top: -0.2rem;
            color: #667eea;
        }
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
        }
        .float-animation {
            animation: float 3s ease-in-out infinite;
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Hero Section -->
    <section class="relative overflow-hidden bg-gradient-to-br from-purple-900 via-purple-800 to-indigo-900 text-white">
        <div class="absolute inset-0 bg-black opacity-20"></div>
        <div class="relative container mx-auto px-6 py-24">
            <div class="max-w-4xl mx-auto text-center">
                <div class="mb-6 float-animation">
                    <i class="fas fa-terminal text-6xl opacity-80"></i>
                </div>
                <h1 class="text-5xl md:text-6xl font-bold mb-6 serif-font">
                    CCPlugins
                </h1>
                <p class="text-xl md:text-2xl mb-8 opacity-90">
                    为 Claude Code CLI 设计的开源命令扩展工具
                </p>
                <div class="flex flex-wrap justify-center gap-4 mb-12">
                    <span class="bg-white bg-opacity-20 px-4 py-2 rounded-full text-sm">
                        <i class="fas fa-code mr-2"></i>24 个专业命令
                    </span>
                    <span class="bg-white bg-opacity-20 px-4 py-2 rounded-full text-sm">
                        <i class="fas fa-rocket mr-2"></i>优化 AI 工作流
                    </span>
                    <span class="bg-white bg-opacity-20 px-4 py-2 rounded-full text-sm">
                        <i class="fas fa-users mr-2"></i>开源社区驱动
                    </span>
                </div>
                <a href="https://github.com/brennercruvinel/CCPlugins" target="_blank" class="inline-flex items-center bg-white text-purple-900 px-8 py-4 rounded-lg font-semibold hover:bg-gray-100 transition-colors">
                    <i class="fab fa-github mr-3 text-xl"></i>
                    查看 GitHub 项目
                </a>
            </div>
        </div>
        <div class="absolute bottom-0 left-0 right-0">
            <svg viewBox="0 0 1440 120" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M0 120L60 110C120 100 240 80 360 70C480 60 600 60 720 65C840 70 960 80 1080 85C1200 90 1320 90 1380 90L1440 90V120H1380C1320 120 1200 120 1080 120C960 120 840 120 720 120C600 120 480 120 360 120C240 120 120 120 60 120H0V120Z" fill="#F9FAFB"/>
            </svg>
        </div>
    </section>

    <!-- Problem Section -->
    <section class="py-20 bg-white">
        <div class="container mx-auto px-6">
            <div class="max-w-4xl mx-auto">
                <h2 class="text-4xl font-bold mb-12 text-center gradient-text">它能解决什么问题？</h2>
                <div class="prose prose-lg max-w-none">
                    <p class="text-gray-700 leading-relaxed mb-6">
                        <span class="drop-cap serif-font">使</span>用 Claude Code CLI 时，开发者常遇到 AI 输出过于冗长或偏离需求的问题。例如，修复一个 bug 可能得到一堆测试文件，简单重构可能变成代码架构论文。手动输入详细指令（如"请像高级工程师一样操作"）耗时，且结果仍可能不理想。
                    </p>
                    <p class="text-gray-700 leading-relaxed">
                        传统工具如 GitHub Copilot 或 VS Code 扩展缺乏针对 Claude 的优化，难以提供一致的开发体验。<strong class="text-purple-700">CCPlugins 正是为解决这些问题而生</strong>，通过预定义的智能命令，简化 Claude Code 的交互，确保输出直接、实用，减少手动清理和调整时间。
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- Core Features -->
    <section class="py-20 bg-gray-50">
        <div class="container mx-auto px-6">
            <h2 class="text-4xl font-bold mb-16 text-center gradient-text">核心功能概述</h2>
            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
                <div class="bg-white rounded-xl p-8 card-hover">
                    <div class="text-purple-600 mb-4 feature-icon inline-block">
                        <i class="fas fa-broom text-4xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">代码清理</h3>
                    <code class="text-sm bg-gray-100 px-2 py-1 rounded">/cleanproject</code>
                    <p class="text-gray-600 mt-3">移除调试文件、临时测试和备份文件，保留干净的生产代码，保持项目整洁。</p>
                </div>
                <div class="bg-white rounded-xl p-8 card-hover">
                    <div class="text-purple-600 mb-4 feature-icon inline-block">
                        <i class="fas fa-search text-4xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">代码审查</h3>
                    <code class="text-sm bg-gray-100 px-2 py-1 rounded">/review</code>
                    <p class="text-gray-600 mt-3">通过子代理分析安全、性能和代码质量，提供简洁的审查报告，避免冗长的架构建议。</p>
                </div>
                <div class="bg-white rounded-xl p-8 card-hover">
                    <div class="text-purple-600 mb-4 feature-icon inline-block">
                        <i class="fas fa-clock text-4xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">任务会话管理</h3>
                    <code class="text-sm bg-gray-100 px-2 py-1 rounded">/session-start</code>
                    <p class="text-gray-600 mt-3">记录编码会话目标和成果，支持跨会话上下文跟踪，提升项目连续性。</p>
                </div>
                <div class="bg-white rounded-xl p-8 card-hover">
                    <div class="text-purple-600 mb-4 feature-icon inline-block">
                        <i class="fas fa-sync-alt text-4xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">智能重构</h3>
                    <code class="text-sm bg-gray-100 px-2 py-1 rounded">/refactor</code>
                    <p class="text-gray-600 mt-3">自动识别重构范围，验证迁移完整性，生成简洁代码，减少手动调整。</p>
                </div>
                <div class="bg-white rounded-xl p-8 card-hover">
                    <div class="text-purple-600 mb-4 feature-icon inline-block">
                        <i class="fas fa-vial text-4xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">测试自动化</h3>
                    <code class="text-sm bg-gray-100 px-2 py-1 rounded">/test</code>
                    <p class="text-gray-600 mt-3">运行测试并自动修复简单问题，生成必要测试用例，简化测试流程。</p>
                </div>
                <div class="bg-white rounded-xl p-8 card-hover">
                    <div class="text-purple-600 mb-4 feature-icon inline-block">
                        <i class="fas fa-plus-circle text-4xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">更多功能</h3>
                    <code class="text-sm bg-gray-100 px-2 py-1 rounded">24+ 命令</code>
                    <p class="text-gray-600 mt-3">包含实现、调试、文档生成等多种专业命令，覆盖完整开发周期。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Workflow Visualization -->
    <section class="py-20 bg-white">
        <div class="container mx-auto px-6">
            <h2 class="text-4xl font-bold mb-16 text-center gradient-text">工作流程可视化</h2>
            <div class="max-w-4xl mx-auto bg-gray-50 rounded-xl p-8">
                <div class="mermaid">
                    graph LR
                        A[开发者] -->|输入命令| B[CCPlugins]
                        B -->|优化指令| C[Claude Code CLI]
                        C -->|生成代码| D[精简输出]
                        D -->|返回结果| A
                        
                        B -.->|/cleanproject| E[代码清理]
                        B -.->|/review| F[代码审查]
                        B -.->|/refactor| G[智能重构]
                        B -.->|/test| H[测试自动化]
                        
                        style A fill:#667eea,stroke:#fff,color:#fff
                        style B fill:#764ba2,stroke:#fff,color:#fff
                        style C fill:#f093fb,stroke:#333
                        style D fill:#4facfe,stroke:#333
                </div>
            </div>
        </div>
    </section>

    <!-- Use Cases -->
    <section class="py-20 bg-gray-50">
        <div class="container mx-auto px-6">
            <h2 class="text-4xl font-bold mb-16 text-center gradient-text">使用场景</h2>
            <div class="space-y-12 max-w-4xl mx-auto">
                <div class="bg-white rounded-xl p-8 shadow-lg">
                    <div class="flex items-start">
                        <div class="text-purple-600 mr-6 mt-1">
                            <i class="fas fa-user-tie text-3xl"></i>
                        </div>
                        <div class="flex-1">
                            <h3 class="text-2xl font-bold mb-4">独立开发者优化项目</h3>
                            <p class="text-gray-700 mb-4">
                                一名开发者维护 JavaScript 项目，使用 <code class="bg-gray-100 px-2 py-1 rounded text-sm">/cleanproject</code> 移除调试日志和临时文件，确保代码库整洁。通过 <code class="bg-gray-100 px-2 py-1 rounded text-sm">/review</code> 快速检查 UserService.js 的安全性和性能问题，获得简洁建议，节省手动审查时间。
                            </p>
                            <div class="bg-purple-50 border-l-4 border-purple-500 p-4 rounded">
                                <p class="text-purple-900 font-medium">
                                    <i class="fas fa-lightbulb mr-2"></i>
                                    思考问题：你的项目中是否存在重复的清理或审查任务可以交给 CCPlugins 自动化？
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="bg-white rounded-xl p-